<script lang="ts" setup>
import _ from 'lodash-es';

defineOptions({ name: 'XButton' });

const props = withDefaults(
  defineProps<{
    modelValue?: boolean;
    loading?: boolean;
    preIcon?: string;
    postIcon?: string;
    title?: string;
    type?: '' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
    link?: boolean;
    circle?: boolean;
    round?: boolean;
    plain?: boolean;
    onClick?: (evt: MouseEvent) => any;
    // onClick: Function as PropType<(...args) => any>;
  }>(),
  {
    modelValue: false,
    loading: false,
    preIcon: '',
    postIcon: '',
    title: '',
    type: '',
    link: false,
    circle: false,
    round: false,
    plain: false
  }
);

const getBindValue = computed(() => {
  const delArr: string[] = ['title', 'preIcon', 'postIcon', 'onClick'];
  const attrs = useAttrs();
  const obj = { ...attrs, ...props };
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key];
    }
  }
  return obj;
});
</script>

<template>
  <el-button v-bind="getBindValue" @click="onClick">
    <!-- <el-button  @click="onClick"> -->
    <Icon v-if="preIcon" :icon="preIcon" class="mr-1px" />
    {{ title ? title : '' }}
    <Icon v-if="postIcon" :icon="postIcon" class="mr-1px" />
  </el-button>
</template>
<style lang="scss" scoped>
:deep(.el-button.is-text) {
  padding: 8px 4px;
  margin-left: 0;
}

:deep(.el-button.is-link) {
  padding: 8px 4px;
  margin-left: 0;
}
</style>
